{extend name="common@base/common" /}

{block name="style"}
<link href="__CSS__/main.min.css" rel="stylesheet" type="text/css"/>
{/block}

{block name="body"}
<div class="container">
  <ol class="breadcrumb">
      <li><a href="{:url('index/index')}">演示首页</a></li>
      <li>图片浏览</li>
  </ol>
<section class="demo-section">
<div id="pageContent">

<article><p>此插件允许用户进入灯箱式浏览页面上的图片。</p></article>












<section><header><h3>实例</h3></header><article><h4>简单例子</h4><p>为按钮或链接增加<code>data-toggle="lightbox"</code>属性，点击按钮或图片来浏览图片大图。</p><p>增加<code>data-caption="*"</code>属性来为图片增加额外的描述文本。</p><div class="example">
  <div class="row">
    <div class="col-sm-2">
      <a href="docs/img/img2.jpg" data-group="example-1" data-toggle="lightbox" class="btn btn-primary" data-lightbox-group="example-1"><i class="icon icon-picture"></i> 浏览图片</a>
    </div>
    <div class="col-sm-4">
      <img data-group="example-2" data-toggle="lightbox" data-caption="小图看大图" src="__IMG__/320x320icon.png" class="img-thumbnail" alt="" width="200" data-lightbox-group="example-2">
    </div>
  </div>
</div><pre class="prettyprint prettyprinted" style=""><code class="lang-html"><span class="com">&lt;!-- 使用按钮 --&gt;</span><span class="pln">
</span><span class="tag">&lt;a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"image.jpg"</span><span class="pln"> </span><span class="atn">data-toggle</span><span class="pun">=</span><span class="atv">"lightbox"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"btn btn-primary"</span><span class="tag">&gt;</span><span class="pln">浏览图片</span><span class="tag">&lt;/a&gt;</span></code></pre><pre class="prettyprint prettyprinted" style=""><code class="lang-html"><span class="com">&lt;!-- 使用图片 --&gt;</span><span class="pln">
</span><span class="tag">&lt;img</span><span class="pln"> </span><span class="atn">data-toggle</span><span class="pun">=</span><span class="atv">"lightbox"</span><span class="pln"> </span><span class="atn">src</span><span class="pun">=</span><span class="atv">"small-image.jpg"</span><span class="pln"> </span><span class="atn">data-image</span><span class="pun">=</span><span class="atv">"large-image.jpg"</span><span class="pln"> </span><span class="atn">data-caption</span><span class="pun">=</span><span class="atv">"小图看大图"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"img-thumbnail"</span><span class="pln"> </span><span class="atn">alt</span><span class="pun">=</span><span class="atv">""</span><span class="pln"> </span><span class="atn">width</span><span class="pun">=</span><span class="atv">"200"</span><span class="tag">&gt;</span></code></pre><h4>浏览分组</h4><p>为多个<code>data-toggle="lightbox"</code>指定相同的<code>data-group="*"</code>属性，会启动分组浏览。图片左右两侧会显示图片切换按钮。</p><div class="example">
  <div class="row">
    <div class="col-xs-6 col-sm-4 col-md-3"><a href="__IMG__/320x320icon.png" data-group="example-3" data-toggle="lightbox" data-caption="img1.jpg" data-lightbox-group="example-3"><img src="__IMG__/320x320icon.png" class="img-rounded" alt=""></a></div>
    <div class="col-xs-6 col-sm-4 col-md-3"><a href="__IMG__/320x320icon.png" data-group="example-3" data-toggle="lightbox" data-caption="img2.jpg" data-lightbox-group="example-3"><img src="__IMG__/320x320icon.png" class="img-rounded" alt=""></a></div>
    <div class="col-xs-6 col-sm-4 col-md-3"><a href="__IMG__/320x320icon.png" data-group="example-3" data-toggle="lightbox" data-lightbox-group="example-3"><img src="__IMG__/320x320icon.png" class="img-rounded" alt=""></a></div>
    <div class="col-xs-6 col-sm-4 col-md-3"><a href="__IMG__/320x320icon.png" data-group="example-3" data-toggle="lightbox" data-caption="最后一张" data-lightbox-group="example-3"><img src="__IMG__/320x320icon.png" class="img-rounded" alt=""></a></div>
  </div>
</div><pre class="prettyprint prettyprinted" style=""><code class="lang-html"><span class="com">&lt;!-- 分组图片浏览 --&gt;</span><span class="pln">
</span><span class="tag">&lt;a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"image-1.jpg"</span><span class="pln"> </span><span class="atn">data-toggle</span><span class="pun">=</span><span class="atv">"lightbox"</span><span class="pln"> </span><span class="atn">data-group</span><span class="pun">=</span><span class="atv">"image-group-1"</span><span class="tag">&gt;&lt;img</span><span class="pln"> </span><span class="atn">src</span><span class="pun">=</span><span class="atv">"small-image-1.jpg"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"img-rounded"</span><span class="pln"> </span><span class="atn">alt</span><span class="pun">=</span><span class="atv">""</span><span class="tag">&gt;&lt;/a&gt;</span><span class="pln">
</span><span class="tag">&lt;a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"image-2.jpg"</span><span class="pln"> </span><span class="atn">data-toggle</span><span class="pun">=</span><span class="atv">"lightbox"</span><span class="pln"> </span><span class="atn">data-group</span><span class="pun">=</span><span class="atv">"image-group-1"</span><span class="tag">&gt;&lt;img</span><span class="pln"> </span><span class="atn">src</span><span class="pun">=</span><span class="atv">"small-image-2.jpg"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"img-rounded"</span><span class="pln"> </span><span class="atn">alt</span><span class="pun">=</span><span class="atv">""</span><span class="tag">&gt;&lt;/a&gt;</span><span class="pln">
</span><span class="tag">&lt;a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"image-3.jpg"</span><span class="pln"> </span><span class="atn">data-toggle</span><span class="pun">=</span><span class="atv">"lightbox"</span><span class="pln"> </span><span class="atn">data-group</span><span class="pun">=</span><span class="atv">"image-group-1"</span><span class="tag">&gt;&lt;img</span><span class="pln"> </span><span class="atn">src</span><span class="pun">=</span><span class="atv">"small-image-3.jpg"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"img-rounded"</span><span class="pln"> </span><span class="atn">alt</span><span class="pun">=</span><span class="atv">""</span><span class="tag">&gt;&lt;/a&gt;</span><span class="pln">
...</span></code></pre></article></section>






<script>
function afterPageLoad() {
    $('[data-toggle="lightbox"]').lightbox();
}
</script><section><header><h3>用法</h3></header><article><p>为链接增加<code>data-toggle="lightbox"</code>属性会自动初始化灯箱式式浏览效果。也可以手动为链接和图片进行初始化。</p><pre class="prettyprint prettyprinted" style=""><code class="lang-js"><span class="pln">$</span><span class="pun">(</span><span class="str">'a.lightbox-toggle'</span><span class="pun">).</span><span class="pln">lightbox</span><span class="pun">({</span><span class="pln">
    image</span><span class="pun">:</span><span class="pln"> </span><span class="str">'http://your/image/url.jpg'</span><span class="pun">,</span><span class="pln">
    caption</span><span class="pun">:</span><span class="pln"> </span><span class="str">'图片说明'</span><span class="pln">
</span><span class="pun">});</span></code></pre><p>如果要手动动态设置显示的图片描述文本，则可以在初始化之后调用实例对象上的 <code>setImage(image, caption)</code> 方法：</p><pre class="prettyprint prettyprinted" style=""><code class="lang-js"><span class="com">// 获取实例对象</span><span class="pln">
</span><span class="kwd">var</span><span class="pln"> myLightBox </span><span class="pun">=</span><span class="pln"> $</span><span class="pun">(</span><span class="str">'#lightBoxToggle'</span><span class="pun">).</span><span class="pln">data</span><span class="pun">(</span><span class="str">'zui.lightbox'</span><span class="pun">);</span><span class="pln">

</span><span class="com">// 更新图片和说明</span><span class="pln">
myLightBox</span><span class="pun">.</span><span class="pln">setImage</span><span class="pun">(</span><span class="str">'http://new/image/url.jpg'</span><span class="pun">,</span><span class="pln"> </span><span class="str">'新的图片'</span><span class="pun">);</span><span class="pln">

</span><span class="com">// 这样在用户下次点击触发元素时就会弹出显示新的图片.</span></code></pre><p>如果要手动显示图片，则可以在初始化之后调用实例对象上的 <code>show()</code> 方法，该实例方法还可以接收两个参数 <code>image</code> 和 <code>caption</code> 在显示之前自动调用 <code>setImage</code> 方法更新图片和说明文本。</p><pre class="prettyprint prettyprinted" style=""><code class="lang-js"><span class="com">// 获取实例对象</span><span class="pln">
</span><span class="kwd">var</span><span class="pln"> myLightBox </span><span class="pun">=</span><span class="pln"> $</span><span class="pun">(</span><span class="str">'#lightBoxToggle'</span><span class="pun">).</span><span class="pln">data</span><span class="pun">(</span><span class="str">'zui.lightbox'</span><span class="pun">);</span><span class="pln">

</span><span class="com">// 立即显示</span><span class="pln">
myLightBox</span><span class="pun">.</span><span class="pln">show</span><span class="pun">();</span><span class="pln">

</span><span class="com">// 更新图片和描述文本并立即显示</span><span class="pln">
myLightBox</span><span class="pun">.</span><span class="pln">show</span><span class="pun">(</span><span class="str">'http://new/image/url.jpg'</span><span class="pun">,</span><span class="pln"> </span><span class="str">'新的图片'</span><span class="pun">);</span></code></pre></article></section></div>


</section>
{/block}